<template>
  <div>
    <h1>新闻表</h1>
    <form action="" v-model="form" @submit.prevent="post_news">
      <p>添加新闻标题<input type="text" v-model="form.title"></p>
      <p>添加新闻内容<input type="text" v-model="form.content"></p>
      <button type="submit">添加</button>
    </form>


    <table border="11" cellspacing="11" align="center">
      <tr>
        <td>id</td>
        <td>新闻标题</td>
        <td>新闻内容</td>
      </tr>
      <tr v-for="i in data">
        <td>{{i.id}}</td>
        <td>{{i.title}}</td>
        <td>{{i.content}}</td>
      </tr>
      <tr>
        <td>
        <span v-for="i in page_range">
          <button @click="get_news(i)">{{i}}</button>
        </span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "news",
  data() {
    return {
      // id:this.$route.query.id,
      data: '',
      form: {},
      page_range:''
    }
  },
  methods:{
    get_news(i){
      this.$axios.get('new/?id='+this.id+'&pid='+i)
        .then(res=>{
          console.log(res)
          this.data = res.data.data
          this.page_range = res.data.page_range
        })
    },
    post_news(){
      this.$axios.post('new/',this.form)
        .then(res=>{
          console.log(res)
          alert(res.data.code)
          this.form={}
          this.get_news()
        })
    }
  },
  mounted() {
    this.get_news(1)
  }
}
</script>

<style scoped>

</style>
